<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动邮件处理系统</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        h1 {
            margin: 0;
            font-size: 2em;
        }
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }
        .card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            text-align: center;
        }
        .card h3 {
            margin-top: 0;
            color: #333;
            font-size: 1.1em;
        }
        .card .value {
            font-size: 1.8em;
            font-weight: bold;
            color: #667eea;
            margin: 10px 0;
        }
        .controls {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 25px;
        }
        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 15px;
            margin-right: 10px;
            transition: background 0.3s;
        }
        .btn:hover {
            background: #5a6fd8;
        }
        .btn.stop {
            background: #e74c3c;
        }
        .btn.stop:hover {
            background: #c0392b;
        }
        .btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
        }
        .section-title {
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 8px;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        th {
            background-color: #667eea;
            color: white;
        }
        tr:hover {
            background-color: #f8f9fa;
        }
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 6px;
        }
        .status-running {
            background-color: #2ecc71;
        }
        .status-stopped {
            background-color: #e74c3c;
        }
        .refresh-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            float: right;
        }
        /* 邮件表格容器样式 */
        .table-container {
            max-height: 400px;
            overflow-y: auto;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        /* 日志显示区域样式 */
        .logs-container {
            background: #2c3e50; /* 经典深色背景 */
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-top: 25px;
        }
        .logs-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .clear-logs-btn {
            background: #95a5a6;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .clear-logs-btn:hover {
            background: #7f8c8d;
        }
        .log-entry {
            padding: 6px 0;
            border-bottom: 1px solid #34495e;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: #ecf0f1; /* 浅色文字 */
        }
        .log-entry:last-child {
            border-bottom: none;
        }
        .log-info {
            color: #3498db;
        }
        .log-warning {
            color: #f39c12;
        }
        .log-error {
            color: #e74c3c;
        }
        .log-debug {
            color: #95a5a6;
        }
        #systemLogs {
            max-height: 300px;
            overflow-y: auto;
            padding: 10px;
            background: #1a252f;
            border-radius: 6px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            .dashboard {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            .card {
                padding: 15px;
            }
            .controls {
                padding: 15px;
            }
            th, td {
                padding: 8px 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>自动授权邮件自动处理系统</h1>
            <p>自动处理授权邮件并提供统计信息</p>
        </header>

        <div class="dashboard">
            <div class="card">
                <h3>服务状态</h3>
                <div id="serviceStatus">
                    <span class="status-indicator status-stopped"></span>
                    <span>已停止</span>
                </div>
            </div>
            <div class="card">
                <h3>今日审批</h3>
                <div class="value" id="todayProcessed">0</div>
            </div>
            <div class="card">
                <h3>总审批数</h3>
                <div class="value" id="totalProcessed">0</div>
            </div>
        </div>

        <div class="controls">
            <h2 class="section-title">服务控制</h2>
            <button id="startBtn" class="btn">启动服务</button>
            <button id="stopBtn" class="btn stop">停止服务</button>
            <button id="refreshBtn" class="refresh-btn">刷新数据</button>
        </div>

        <div>
            <h2 class="section-title">已处理的邮件</h2>
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>发件人</th>
                            <th>主题</th>
                            <th>邮件日期</th>
                            <th>处理时间</th>
                        </tr>
                    </thead>
                    <tbody id="processedEmails">
                        <tr>
                            <td colspan="4" style="text-align: center;">暂无数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 日志显示区域 -->
        <div class="logs-container">
            <div class="logs-header">
                <h2 class="section-title" style="color: white; border-bottom: 2px solid #3498db; margin-bottom: 0;">系统日志</h2>
                <button id="clearLogsBtn" class="clear-logs-btn">清空日志</button>
            </div>
            <div id="systemLogs">
                <div class="log-entry">暂无日志</div>
            </div>
        </div>
    </div>

    <script>
        // API基础URL - 使用传统的8000端口
        const API_BASE = 'http://localhost:8000/api/v1';
        
        // DOM元素
        const serviceStatusEl = document.getElementById('serviceStatus');
        const todayProcessedEl = document.getElementById('todayProcessed');
        const totalProcessedEl = document.getElementById('totalProcessed');
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const refreshBtn = document.getElementById('refreshBtn');
        const processedEmailsEl = document.getElementById('processedEmails');
        const clearLogsBtn = document.getElementById('clearLogsBtn');

        // 更新服务状态显示
        function updateServiceStatus(running) {
            if (running) {
                serviceStatusEl.innerHTML = '<span class="status-indicator status-running"></span><span>运行中</span>';
                startBtn.disabled = true;
                stopBtn.disabled = false;
            } else {
                serviceStatusEl.innerHTML = '<span class="status-indicator status-stopped"></span><span>已停止</span>';
                startBtn.disabled = false;
                stopBtn.disabled = true;
            }
        }
        
        // 获取服务状态
        //这段代码是一个JavaScript异步函数，用于从后端API获取邮件处理服务的状态
        //该函数会向后端API发送GET请求，并返回邮件处理服务的运行状态。
        //定义一个名为getServiceStatus的异步函数。使用async关键字表示这是一个异步函数，
        // 可以使用await关键字等待异步操作完成。
        async function getServiceStatus() {
            try {
                //使用fetch API向后端发送HTTP GET请求，获取服务状态。:
                //.${API_BASE}/email/status 是请求的URL，其中API_BASE是一个全局常量，
                // 定义为http://localhost:8000/api/v1
                //.await关键字会等待fetch请求完成并返回Response对象
                const response = await fetch(`${API_BASE}/email/status`);
                //解析响应体为JSON格式的数据。response.json()返回一个Promise，await等待解析完成。
                const data = await response.json();
                //调用updateServiceStatus函数更新前端界面显示的服务状态。:
                //data.running是后端返回的布尔值，表示服务是否正在运行
                //true表示服务正在运行，false表示服务已停止
                updateServiceStatus(data.running);
                //返回服务状态（布尔值），供其他代码使用
                return data.running;
                //如果在try块中发生任何错误（如网络问题、服务器无响应等），会执行catch块：
                //.使用console.error在浏览器控制台输出错误信息
                //.返回false表示获取状态失败，默认服务状态为停止
            } catch (error) {
                console.error('获取服务状态失败:', error);
                return false;
            }
        }
        
        // 启动服务，这段JavaScript代码是前端界面中用于启动邮件处理服务的功能函数
        async function startService() {
            try {
                // 向后端API发送POST请求来启动邮件服务，/api/v1/email/start
                const response = await fetch(`${API_BASE}/email/start`, {
                    method: 'POST'  // 使用POST方法
                });

                // 解析API返回的JSON数据
                const data = await response.json();
                // 通过alert弹窗向用户显示操作结果，显示API返回的消息（例如"服务启动成功"）
                alert(data.message);
                // 更新界面显示的服务状态
                await getServiceStatus();
            } catch (error) {
                // 如果请求失败，捕获错误并在控制台记录
                console.error('启动服务失败:', error);
                // 显示错误提示给用户
                alert('启动服务失败: ' + error.message);
            }
        }
        
        // 停止服务
        async function stopService() {
            try {
                const response = await fetch(`${API_BASE}/email/stop`, {
                    method: 'POST'
                });
                const data = await response.json();
                alert(data.message);
                await getServiceStatus();
            } catch (error) {
                console.error('停止服务失败:', error);
                alert('停止服务失败: ' + error.message);
            }
        }
        
        // 获取统计数据
        async function getStatistics() {
            try {
                const response = await fetch(`${API_BASE}/email/stats`);
                const data = await response.json();
                
                todayProcessedEl.textContent = data.today_processed;
                totalProcessedEl.textContent = data.total_processed;
            } catch (error) {
                console.error('获取统计数据失败:', error);
            }
        }
        
        // 获取已处理的邮件
        async function getProcessedEmails() {
            try {
                const response = await fetch(`${API_BASE}/email/processed?limit=20`);
                const emails = await response.json();
                
                if (emails.length === 0) {
                    processedEmailsEl.innerHTML = '<tr><td colspan="4" style="text-align: center;">暂无数据</td></tr>';
                    return;
                }
                
                processedEmailsEl.innerHTML = emails.map(email => {
                    // 处理发件人信息
                    const sender = email.sender || '未知发件人';
                    // 处理主题信息
                    const subject = email.subject || '无主题';
                    // 处理邮件日期
                    let emailDate = '未知日期';
                    if (email.email_date) {
                        try {
                            emailDate = new Date(email.email_date).toLocaleDateString('zh-CN');
                        } catch (e) {
                            emailDate = '日期解析失败';
                        }
                    }
                    // 处理处理时间
                    let processedTime = '未知时间';
                    if (email.processed_time) {
                        try {
                            processedTime = new Date(email.processed_time).toLocaleString('zh-CN');
                        } catch (e) {
                            processedTime = '时间解析失败';
                        }
                    }
                    
                    return `
                        <tr>
                            <td>${sender}</td>
                            <td>${subject}</td>
                            <td>${emailDate}</td>
                            <td>${processedTime}</td>
                        </tr>
                    `;
                }).join('');
            } catch (error) {
                console.error('获取已处理邮件失败:', error);
                processedEmailsEl.innerHTML = '<tr><td colspan="4" style="text-align: center;">加载失败</td></tr>';
            }
        }
        
        // 获取系统日志
        async function getSystemLogs() {
            try {
                const response = await fetch(`${API_BASE}/system/logs?limit=50`);
                const logs = await response.json();
                
                const logsContainer = document.getElementById('systemLogs');
                if (!logsContainer) return;
                
                if (logs.length === 0) {
                    logsContainer.innerHTML = '<div class="log-entry">暂无日志</div>';
                    return;
                }
                
                logsContainer.innerHTML = logs.map(log => {
                    const timestamp = log.timestamp ? new Date(log.timestamp).toLocaleString('zh-CN') : '未知时间';
                    const level = log.level || 'INFO';
                    const message = log.message || '';
                    
                    return `<div class="log-entry log-${level.toLowerCase()}">[${timestamp}] [${level}] ${message}</div>`;
                }).join('');
                
                // 滚动到底部
                logsContainer.scrollTop = logsContainer.scrollHeight;
            } catch (error) {
                console.error('获取系统日志失败:', error);
                const logsContainer = document.getElementById('systemLogs');
                if (logsContainer) {
                    logsContainer.innerHTML = '<div class="log-entry">加载日志失败</div>';
                }
            }
        }
        
        // 清空日志显示
        function clearLogs() {
            const logsContainer = document.getElementById('systemLogs');
            if (logsContainer) {
                logsContainer.innerHTML = '<div class="log-entry">日志已清空</div>';
            }
        }
        
        // 定义一个异步函数，用于调用后端API清空系统日志
        async function clearLogsAPI() {
            try {
                // 发送POST请求到后端清空日志接口
                const response = await fetch(`${API_BASE}/system/logs/clear`, {
                    method: 'POST'  // 使用POST方法，因为这是一个修改服务器状态的操作
                });
                // 解析后端返回的JSON响应数据
                const data = await response.json();
                // 显示后端返回的操作结果消息
                alert(data.message);
                
                // 清空前端页面中显示的日志内容
                const logsContainer = document.getElementById('systemLogs');
                if (logsContainer) {
                    // 将日志容器的内容替换为"暂无日志"提示信息
                    logsContainer.innerHTML = '<div class="log-entry">暂无日志</div>';
                }
            } catch (error) {
                // 捕获并处理网络请求或解析过程中的任何错误
                console.error('清空日志失败:', error);
                // 向用户显示错误信息
                alert('清空日志失败: ' + error.message);
            }
        }
        
        // 刷新所有数据,核心函数
        async function refreshAllData() {
            await getServiceStatus();   //获取并更新服务状态
            await getStatistics();      //获取并更新统计数据
            await getProcessedEmails();  //获取并更新已处理邮件列表
            await getSystemLogs();      //获取并更新系统日志
        }
        
        // 初始化事件监听器
        function initEventListeners() {
            startBtn.addEventListener('click', startService);
            stopBtn.addEventListener('click', stopService);
            refreshBtn.addEventListener('click', refreshAllData);
            clearLogsBtn.addEventListener('click', clearLogsAPI);
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', async () => {
            initEventListeners();
            await refreshAllData();
            
            //每60秒自动刷新一次数据，修改为5分钟300000毫秒
            //后端支持,这些前端功能通过调用后端API实现：
            //.服务状态：GET /api/v1/email/status-获取服务状态
            //.统计数据：GET /api/v1/email/stats-获取统计数据
            //.已处理邮件：GET /api/v1/email/processed?limit=20- 获取最近处理的20封邮件
            setInterval(refreshAllData, 300000); //除了手动点击刷新按钮外，页面还会每300秒自动刷新一次数据
        });
    </script>
</body>
</html>